<template>
  <div class="dashboard_container">
    <div class="header">
      <div class="logo">
        <img src="@/assets/logo.png" />
      </div>
      <div class="body">
        <div class="body_item">
          <div class="nav">
            <div class="title" @click="go('/home')">首页</div>
            <div class="title" @click="go('/login')" v-if="!userInfo.userName">
              登录
            </div>
            <div
              class="title"
              v-else
              style="color: purple"
              @click="go('/shopcard')"
            >
              购物车
            </div>
            <div
              class="title"
              @click="go('/register')"
              v-if="!userInfo.userName"
            >
              注册
            </div>
            <div class="title" style="color: red" v-else @click="logout">
              退出登录
            </div>
          </div>
          <div class="inp">
            <el-input placeholder="请输入内容" v-model="keyword">
              <el-button slot="append" @click="search">搜索</el-button>
            </el-input>
          </div>
        </div>
      </div>
    </div>
    <div class="body">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Dashboard",
  props: [],
  data() {
    return {
      keyword: "",
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  created() {
    //获取一级分类
    this.getTypeOne();
    //获取轮廓图数据
    this.getBanner();
    //获取所有商品数据
    this.getAllGoodsList();
  },
  methods: {
    //点击进入页面
    go(path) {
      this.$router.push("/dashboard" + path);
    },
    //退出
    logout() {
      this.go("/home");
      this.$store.dispatch("logout");
    },
    //获取一级分类
    async getTypeOne() {
      const res = await this.$store.dispatch("getTypeOne");
      if (res) return this.$message.error("获取一级标题失败");
    },
    //获取轮廓图数据
    async getBanner() {
      const res = await this.$store.dispatch("getBanner");
      if (res !== 1) {
        return this.$message.error("获取轮廓图数据失败");
      }
    },
    //获取所有商品数据
    async getAllGoodsList() {
      const res = await this.$store.dispatch("getAllGoodsList");
      if (res == 0) return this.$message.error("获取总商品数据失败");
    },
    //搜索框事件
    search() {
      this.$router.push({ name: "goodsearch", query: { word: this.keyword } });
    },
  },
};
</script>

<style lang="less" scoped>
.dashboard_container {
  padding-top: 50px;
  width: 100%;
  .header {
    position: sticky;
    z-index: 999;
    top: -120px;
    background-color: #fff;
    padding: 20px 0 10px 0;
    border-top: 2px solid #eee;
    box-shadow: 0px 0 1px 1px #eee;
    .logo {
      text-align: center;
      img {
        width: 100px;
        height: 100px;
      }
    }
    .body {
      z-index: 9999;

      height: 50px;
      padding: 5px 0;
      .body_item {
        width: 1000px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        .nav {
          display: flex;
          width: 400px;
          justify-content: space-between;
          line-height: 40px;
          .title {
            font-size: 20px;
            font-weight: 900;
            cursor: pointer;
          }
        }
        .inp {
          margin-right: 100px;
          width: 400px;
          .el-input {
            font-size: 15px;
            .el-input__inner {
              outline: none;
              border: transparent;
            }
          }
        }
      }
    }
  }
}
</style>